<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeClone - 创建你的数字分身</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 悬挂标点 */
        .hanging-punctuation {
            hanging-punctuation: first last;
        }
        
        /* 卡片悬停效果 */
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 按钮动画 */
        .btn-animate {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .btn-animate::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .btn-animate:hover::before {
            width: 300px;
            height: 300px;
        }
        
        /* 滚动动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 代码块样式 */
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.875rem;
        }
        
        /* 数字强调 */
        .number-highlight {
            display: inline-block;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            font-weight: 700;
            margin: 0 0.25rem;
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24 lg:py-32">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-5xl lg:text-7xl font-bold mb-6 tracking-tight">
                    <span class="block">WeClone</span>
                    <span class="block text-3xl lg:text-4xl mt-2 font-light opacity-90">创建你的数字分身</span>
                </h1>
                <p class="text-xl lg:text-2xl mb-8 opacity-90 leading-relaxed">
                    通过微信聊天记录和语音消息，打造专属的 AI 数字分身
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="https://github.com/xming521/WeClone" target="_blank" class="btn-animate inline-flex items-center px-8 py-4 bg-white text-purple-900 rounded-full font-semibold hover:bg-gray-100 transition-all">
                        <i class="fab fa-github mr-2"></i>
                        查看项目
                    </a>
                    <div class="inline-flex items-center px-6 py-4 bg-transparent border-2 border-white rounded-full text-white">
                        <i class="fas fa-star mr-2"></i>
                        <span class="font-semibold">14.6k Stars</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-gray-50 to-transparent"></div>
    </section>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-6 py-16 max-w-6xl">
        
        <!-- 项目介绍 -->
        <section class="mb-20 fade-in">
            <div class="bg-white rounded-2xl shadow-xl p-8 lg:p-12">
                <p class="text-lg leading-relaxed text-gray-700 drop-cap hanging-punctuation">
                    WeClone 是一个开源项目，通过微信聊天记录和语音消息微调大语言模型（LLM）与语音模型，创建个性化数字分身并绑定到聊天机器人。它面向 AI 爱好者、开发者及希望实现数字永生的用户，提供从数据处理到模型部署的全链路解决方案。
                </p>
            </div>
        </section>

        <!-- 解决的问题 -->
        <section class="mb-20 fade-in">
            <h2 class="text-4xl font-bold mb-8 text-center gradient-text">它能解决什么问题？</h2>
            <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-2xl p-8 lg:p-12">
                <p class="text-lg leading-relaxed text-gray-700">
                    创建个性化 AI 助手时，用户常面临数据收集复杂、模型微调技术门槛高、以及语音克隆效果不佳的痛点。现有工具往往需要手动处理聊天数据、依赖云端 API 或缺乏多模态支持，导致隐私风险和成本高企。<strong class="text-purple-700">WeClone 正是为解决这些问题而设计</strong>，通过本地化微调和语音克隆技术，简化数字分身创建流程，保障数据隐私。
                </p>
            </div>
        </section>

        <!-- 核心功能 -->
        <section class="mb-20 fade-in">
            <h2 class="text-4xl font-bold mb-12 text-center gradient-text">核心功能概述</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="card-hover bg-white rounded-xl shadow-lg p-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-comments text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">聊天记录微调</h3>
                    <p class="text-gray-600">使用微信聊天记录（CSV 格式）微调 LLM（如 Qwen2.5-7B-Instruct），生成符合用户语言风格的对话。</p>
                </div>
                
                <div class="card-hover bg-white rounded-xl shadow-lg p-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-microphone text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">高质量语音克隆</h3>
                    <p class="text-gray-600">基于 5 秒以上微信语音消息和 0.5B 模型，生成高达 <span class="number-highlight">95%</span> 相似度的语音，保留语调和情感。</p>
                </div>
                
                <div class="card-hover bg-white rounded-xl shadow-lg p-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-plug text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">多平台绑定</h3>
                    <p class="text-gray-600">支持将数字分身接入微信、Telegram、QQ 等平台，实现自动回复。</p>
                </div>
                
                <div class="card-hover bg-white rounded-xl shadow-lg p-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">数据隐私过滤</h3>
                    <p class="text-gray-600">自动去除敏感信息（如手机号、邮箱），提供禁用词库，保护用户隐私。</p>
                </div>
                
                <div class="card-hover bg-white rounded-xl shadow-lg p-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-cube text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">灵活模型支持</h3>
                    <p class="text-gray-600">默认使用 Qwen2.5-7B-Instruct，支持 LLaMA Factory 的其他模型，适配多种硬件环境。</p>
                </div>
            </div>
        </section>

        <!-- 技术架构图 -->
        <section class="mb-20 fade-in">
            <h2 class="text-4xl font-bold mb-12 text-center gradient-text">技术架构</h2>
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="mermaid">
                    graph TB
                        A[微信数据导出] --> B[数据预处理]
                        B --> C[聊天记录CSV]
                        B --> D[语音消息]
                        C --> E[LLM微调]
                        D --> F[语音克隆]
                        E --> G[数字分身模型]
                        F --> G
                        G --> H[多平台部署]
                        H --> I[微信机器人]
                        H --> J[Telegram Bot]
                        H --> K[QQ机器人]
                        
                        style A fill:#f9f,stroke:#333,stroke-width:2px
                        style G fill:#9f9,stroke:#333,stroke-width:2px
                        style H fill:#99f,stroke:#333,stroke-width:2px
                </div>
            </div>
        </section>

        <!-- 使用场景 -->
        <section class="mb-20 fade-in">
            <h2 class="text-4xl font-bold mb-12 text-center gradient-text">使用场景</h2>
            <div class="space-y-6">
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8 border-l-4 border-blue-500">
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">
                        <i class="fas fa-robot mr-3 text-blue-500"></i>个性化智能助手
                    </h3>
                    <p class="text-lg text-gray-700 mb-3">用户基于微信聊天记录创建数字分身，绑定到 Telegram 机器人，自动回复朋友消息，模仿个人风格。</p>
                    <p class="text-gray-600 italic">你的日常沟通是否需要这样的自动化助手？</p>
                </div>
                
                <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-2xl p-8 border-l-4 border-purple-500">
                    <h3 class="text-2xl font-bold mb-4